<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>React Document</title>
</head>
<body>
  <div id='test'></div>
  <script src='../js/react.development.js'></script>
  <script src='../js/react-dom.development.js'></script>
  <script src='../js/babel.min.js'></script>
  <script type='text/babel'>
    // 1. 用类定义组件 适用于复杂组件
    class MyComponent extends React.Component{
      // render放在MyComponent类的原型对象上,供实例使用
      render() {
        // this是类的实例对象
        console.log(this instanceof MyComponent)
        return <h2>函数式组件</h2>
      }
    }
    // 2. 渲染组件
    ReactDOM.render(<MyComponent/>, document.getElementById('test'))
  </script>
</body>
</html>
<!--
  执行ReactDOM.render后:
  1. react解析组件标签,找到Demo组件
  2. 发现组件是类定义的,new出该类的实例,并通过该实例调用原型的render方法.
  3. 将render返回的虚拟dom转为真实dom
-->